<template>
  <div class="specialLocal-product">
    <scroll ref="verticalScroll" :data="resListOther" :pullUpLoad="true" @pullingUp="onPullingUp">

      <!-- 顶部banner -->
      <div>
        <div class="product-list" v-show="atlasList">
          <slider :list="atlasList" :show-dot="atlasList.length > 1">
            <div v-for="(item, index) in atlasList" :key="index">
              <img :src="item.src" width="100%" height="358px">
            </div>
          </slider>
        </div>

        <!-- 商品名、简介、价格 -->
        <div class="productSummary">
          <div class="productSummaryLeft">
            <h4>{{resList.name}}</h4>
            <span class="summary">{{resList.intro}}</span>
          </div>
        </div>

        <!-- 评价 -->
        <div class="productComment" v-if="commentDataList.length > 0">
          <p>用户评价</p>
          <comment :headUrlImg="commentDataList[0].headUrl" :commentUsername="commentDataList[0].nickname" :dataRate="commentDataList[0].rate" :commentConent="commentDataList[0].comment" :dateTime="commentDataList[0].createAt" :replyCounte="commentDataList[0].replyCount" @commentAll="commentAll(commentDataList[0])" :matchImgUrl="commentDataList[0].matchImgUrl" @gotoUser="gotoUser(commentDataList[0])">
          </comment>
          <div class="moreFooter" @click="moreComment">
            更多评论{{commentDataList.length}}条 >>
          </div>
        </div>

        <!-- 本店铺的其他商品 -->
        <div class="transverse-scroll">
          <p class="title">{{resList.storeName}}的其他商品</p>
          <ul class="specialty-list">
            <li v-for="item in resListOther" :key="item.id" @click="clickMore(item.id, item)">
              <div class="thumb" v-lazy:backgroundImage="item.thumbUrl"></div>
              <div class="info">
                <p class="name">{{item.name}}</p>
                <div class="bottom">
                  <p class="comment">
                    <span>{{item.commentCount}}</span>条评论</p>
                  <p class="price">
                    <span>￥</span>{{item.price}}</p>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </scroll>
  </div>
</template>

<script type='text/ecmascript-6'>
import Scroll from '@/components/scroll/scroll'
import Slider from '@/components/slider/slider'
import Comment from '@/components/comment/comment'
import { Grid, GridItem, TransferDomDirective as TransferDom } from 'vux'
import axios from '@/api/axiosApi'
import { localUser } from '@/assets/js/local'

export default {
  data() {
    return {
      item: {},
      resListOther: [],
      resList: [],
      options: {
        getThumbBoundsFn(index) {
          let thumbnail = document.querySelectorAll('.top-wrapper')[0]
          let pageYScroll =
            window.pageYOffset || document.documentElement.scrollTop
          let rect = thumbnail.getBoundingClientRect()
          return { x: rect.left, y: rect.top + pageYScroll, w: rect.width }
        }
      }
    }
  },
  props: {
    commentDataList: {
      type: Array,
      default: []
    },
    atlasList: {
      type: Array,
      default: []
    }
  },
  directives: {
    TransferDom
  },
  components: {
    Scroll,
    Slider,
    Comment,
    Grid,
    GridItem
  },
  created() {
    this.pageNum = 1
    this.pageSize = 10
  },
  mounted() {
    this.$refs.verticalScroll.$el.style.height = window.innerHeight - 93 + 'px'
    this.getSpecialLocalProductListOther()
    this.getSpecialLocalProductList()
  },
  methods: {
    // 商品其他商品
    getSpecialLocalProductListOther() {
      let param = {
        target_type: 2,
        belongStore: this.resList.storeId,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      axios.get(this, '/v1/featureProduct', param, res => {
        if (res.length === 0) {
          if (this.pageNum <= 1) {
            if (this.$refs.verticalScroll) {
              this.$refs.verticalScroll.hiddenPullDown()
            }
          } else {
            this.pageNum--
            if (this.$refs.verticalScroll) {
              this.$refs.verticalScroll.hiddenPullUpLoad()
            }
          }
        } else {
          if (this.pageNum >= 1) {
            this.resListOther = this.resListOther.concat(res)
          } else {
            this.resListOther = res
          }
        }
      })
    },
    // 加入购物车时底部弹框数据/当前页面数据
    clickMore(id, item) {
      let params = {
        thumbUrl: item.thumbUrl,
        price: item.price,
        name: item.name,
        goodId: id
      }
      this.$emit('clickMore', params)
      this.$router.replace(`/specialLocalProductDetail/${id}`)
      let param = {
        target_type: 2,
        id: id
      }
      axios.get(this, '/v1/featureProduct/', param, resList => {
        this.resList = resList[0]
      })
      this.$refs.verticalScroll.scrollTo(0, 0, 200)
    },
    moreComment() {
      this.$emit('moreComment', 2)
    },
    // 点击其他商品，路由跳转
    commentAll(item) {
      if (localUser.get('id') == null) {
        this.$vux.toast.text('请先登录', 'middle')
        this.$router.push('/login')
        return
      }
      this.$store.commit('SET_CURRENT_COMMENT', item)
      this.$router.push(`/cart/productCommentDetails/4/${item.userId}`)
    },
    gotoUser(item) {
      if (localUser.get('id') == null) {
        this.$vux.toast.text('请先登录', 'middle')
        this.$router.push('/login')
      } else {
        this.$router.push(`/archives/${item.userId}`)
      }
    },
    // info主页面商品信息
    getSpecialLocalProductList() {
      let param = {
        target_type: 2,
        id: this.$route.params.id
      }
      axios.get(this, '/v1/featureProduct/', param, resList => {
        this.resList = resList[0]
      })
    },
    onPullingUp() {
      this.pageNum++
      this.getSpecialLocalProductListOther()
    },
    // previewImage () {
    //   this.$refs.previewer.show(0)
    // },
    preImgLoaded() {
      this.$vux.loading.hide()
    }
  }
}
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
@import '~@/assets/css/variable.styl'
@import '~@/assets/css/mixins.styl'

.specialLocal-product
  padding-top 60px
  .productSummary
    text-align left
    .productSummaryLeft
      padding 20px 16px
      background #fff
      line-height 1.4
      h4
        font-size 20px
        margin-bottom 12px
      .summary
        font-size 15px
        color #666
  .productComment
    background #fff
    padding 10px 10px
    margin 10px 0
    text-align left
    .moreFooter
      border-top 1px dashed lightgrey
      display flex
      justify-content center
      align-items center
      width 90%
      text-align center
      margin 0 auto
      font-size $font-size-desc
      color $color-text-2
      padding 10px 0 0 0
    p
      color $color-text-1
      font-size $font-size-title
      padding-bottom 10px
.transverse-scroll
  margin-top 16px
  .title
    background #ffffff
    font-size 17px
    color #333
    height 40px
    line-height 40px
    text-align left
    padding-left 16px
    font-weight bold
.specialty-list
  padding 8px 0
  background-color $color-background
  &:after
    display block
    content ''
    clear both
  li
    float left
    width calc(50vw - 4px)
    background #ffffff
    margin-bottom 8px
    &:nth-child(2n)
      margin-left 4px
    &:nth-child(2n + 1)
      margin-right 4px
  .thumb
    width calc(50vw - 4px)
    height calc(50vw - 4px)
    background-size cover
    background-position center
    background-repeat no-repeat
  .info
    padding 12px
  .name
    font-size 15px
    color #333
    no-wrap()
    line-height 1
    margin-bottom 12px
  .bottom
    display flex
    align-items center
    justify-content space-between
  .comment
    font-size 13px
    color #999
    line-height 1
    span
      color $color-level
  .price
    font-size 18px
    color $color-theme
    span
      font-size 12px
</style>
